<template>
  <div class="q-pa-md">
    <div style="color: blue">
      <fieldset>
        <legend>quickItems</legend>
        <button @click="handlershowAutoFilterRow">
          showAutoFilterRow
          <!-- ({{ fasrTreeList.showAutoFilterRow}}) -->
        </button>
        <button @click="handlershowAutoFilterRow2">
          showAutoFilterRow2
          ({{ showAutoFilterRow }})
        </button>
        <t-button ref="fasBtn" :label="btnText"></t-button>
        <div>
          <q-checkbox v-model="recursive" /> 递归
        </div>
        <div>
          <q-checkbox v-model="allowSelectAll" /> 全选
        </div>
        <div>
          <q-checkbox v-model="allowColumnResizing" /> 调整列宽
        </div>
        <button @click="btnHandler">{{ btnText }}</button>
        <button @click="btnHandler2">{{ btnText }}</button>
        <button @click="debuggerHandler">DEBUGGER</button>
        <t-select v-model="selectMode" :options="[
          { label: 'single', value: 'single' },
          { label: 'multiple', value: 'multiple' },
          { label: 'none', value: 'none' }]"></t-select>
        {{ selectMode }}
        <t-tree-list height="500" ref="fasrTreeList" :selectMode='selectMode' :columnMinWidth="100"
          :recursive="recursive" :allowSelectAll="allowSelectAll" columnResizingMode="widget"
          :allowColumnResizing="allowColumnResizing" :showAutoFilterRow="showAutoFilterRow" :columns=columns
          :rows="dataSource" key-expr="ID" parent-id-expr="PID">
          <!-- <DxColumn caption='asdfasdfasdf'></DxColumn>
          <DxColumnFixing :enabled="true" /> -->
        </t-tree-list>
      </fieldset>
    </div>
  </div>
</template>

<script>

import { result, transform } from 'lodash';
import { computed, ref, onMounted } from 'vue';
import { tasks, employees, priorities } from './data.ts';
import tree from './tree.json';

import { DxColumn, DxFilterRow, DxColumnFixing } from 'devextreme-vue/tree-list';

export default {
  components: {
    DxColumn,
    DxFilterRow,
    DxColumnFixing
  },
  setup() {

    function flattenTree(tree) {
      let flattened = [];

      function traverse(node, PID) {
        flattened.push({ ...node, PID: PID });
        if (node.children && node.children.length > 0) {
          node.children.forEach(child => traverse(child, node.ID));
        }
      }

      tree.forEach(node => traverse(node, "0"));

      return flattened;
    }

    const dataSource = ref(flattenTree(tree.users))

    const fasrTreeList = ref(null);
    const fasBtn = ref(null);

    let Widget = {};
    onMounted(() => {
      Widget.fasrTreeList = fasrTreeList.value;
      Widget.fasBtn = fasBtn.value;
      window.Widget = Widget;
    });

    const handlershowAutoFilterRow = () => {
      Widget.fasrTreeList.showAutoFilterRow = !Widget.fasrTreeList.showAutoFilterRow;
    }

    const handlershowAutoFilterRow2 = () => {
      vm.showAutoFilterRow.value = !vm.showAutoFilterRow.value;
    }

    const btnText = ref("TXT")
    const btnHandler = () => {
      Widget.fasBtn.label += "."
    }
    const btnHandler2 = () => {
      btnText.value += "."
    }

    const vm = {
      dataSource,
      fasrTreeList,
      fasBtn,
      // columns: ref(Object.keys(tree.users[0]).map(key => ({
      //   dataField: key,
      //   caption: key,
      //   width: '100px',
      // }))),
      columns: ref(['Name', 'Code'].map(key => ({
        dataField: key,
        caption: key,
        width: '100px',
      }))),
      allowColumnResizing:ref(false),
      showAutoFilterRow: ref(false),
      btnText: btnText,
      selectMode: ref('none'),
      recursive: ref(false),
      allowSelectAll: ref(false),
      handlershowAutoFilterRow,
      handlershowAutoFilterRow2,
      btnHandler,
      btnHandler2,
      debuggerHandler() {
        alert("debugger")
        debugger;
      }
    };
    return vm;
  },
};
</script>
